<template>
  <NuxtLayout name="without-login">
    <el-container>
      <el-main class="error">
        <div class="error-box">
          <el-card shadow="never" class="el-card--noborder">
            <el-result
              icon="error"
              :title="error?.statusCode"
              :sub-title="error?.message"
            >
              <template #extra>
                <el-button type="primary" @click="handleError">
                  <el-icon><i class="fa fa-home"></i> </el-icon> &nbsp;返回首页
                </el-button>
              </template>
            </el-result>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </NuxtLayout>
</template>
<script lang="ts" setup>
const props = defineProps({
  error: Object,
})

const handleError = () => clearError({ redirect: '/' })
</script>
<style lang="scss" scoped>
.error {
  padding: 60px 0 20px;
}

.error-box {
  width: 640px;
  max-width: 100%;
  margin: 100px auto;
}
</style>
